<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page</title>
	<link href="css/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet">
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/jquery-ui-1.10.2.custom.js"></script>
	<script>
	$(function() {

		$( "#accordion" ).accordion();



		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#autocomplete" ).autocomplete({
			source: availableTags
		});



		$( "#button" ).button();
		$( "#radioset" ).buttonset();



		$( "#tabs" ).tabs();



		$( "#dialog" ).dialog({
			autoOpen: false,
			width: 400,
			buttons: [
				{
					text: "Ok",
					click: function() {
						$( this ).dialog( "close" );
					}
				},
				{
					text: "Cancel",
					click: function() {
						$( this ).dialog( "close" );
					}
				}
			]
		});

		// Link to open the dialog
		$( "#dialog-link" ).click(function( event ) {
			$( "#dialog" ).dialog( "open" );
			event.preventDefault();
		});



		$( "#datepicker" ).datepicker({
			inline: true
		});



		$( "#slider" ).slider({
			range: true,
			values: [ 17, 67 ]
		});



		$( "#progressbar" ).progressbar({
			value: 20
		});


		// Hover states on the static widgets
		$( "#dialog-link, #icons li" ).hover(
			function() {
				$( this ).addClass( "ui-state-hover" );
			},
			function() {
				$( this ).removeClass( "ui-state-hover" );
			}
		);
	});
	</script>
	<style>
	body{
		font: 100% "Trebuchet MS", sans-serif;
		margin: 50px;
	}
	.demoHeaders {
		margin-top: 2em;
	}
	#dialog-link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;
	}
	#dialog-link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;
	}
	#icons {
		margin: 0;
		padding: 0;
	}
	#icons li {
		margin: 2px;
		position: relative;
		padding: 4px 0;
		cursor: pointer;
		float: left;
		list-style: none;
	}
	#icons span.ui-icon {
		float: left;
		margin: 0 4px;
	}
	.fakewindowcontain .ui-widget-overlay {
		position: absolute;
	}
	</style>
</head>
<body>



<!-- Autocomplete -->
<h2 class="demoHeaders">Autocomplete</h2>
<strong>SCHOOL VERIFICAITON PROCESS</strong>

<form id ="form_scl_ver">
<table>
    <tr><td>Request ID</td><td> <input type="text" id ="REQUEST_ID"/></td></tr>
    <tr><td>School's Name</td><td> <input type="text" id ="SCL_NAME"/></td></tr>
    <tr><td>School's Address</td><td> <input type="text" id ="SCL_ADDRESS"/></td></tr>
    <tr><td> City</td><td> <input type="text" id ="SCL_CITY"/></td></tr>
    <tr><td>State</td><td> <input type="text" id ="SCL_STATE"/></td></tr>
    <tr><td> Country</td><td> <input type="text" id ="SCL_COUNTRY"/></td></tr>
    <tr><td>Pin</td><td> <input type="text" id ="SCL_PIN_CODE"/></td></tr>
    <tr><td>Phone No.</td><td> <input type="text" id ="SCL_PHONE_NO"/></td></tr>
    <tr><td>Email-ID</td><td> <input type="text" id ="SCL_EMAIL_ID"/></td></tr>
    <tr><td>   Principal's Name</td><td> <input type="text" id ="SCL_PRINCIPAL_NAME"/></td></tr>
    <tr><td>Principal's Contact Number</td><td> <input type="text" id ="SCL_PRINCIPAL_CONTACT_NUMBER"/></td></tr>
    <tr><td>School's Contact Name</td><td> <input type="text" id ="SCL_CONTACT_NAME"/></td></tr>
    <tr><td>School's Contact Number</td><td> <input type="text" id ="SCL_CONTACT_NUMBER"/></td></tr>
    <tr><td>Source of Information</td><td> <input type="text" id ="SCL_SOURCE_OF_INFORMATION"/></td></tr>




<tr><TD><button id="button">Submit</button></td></TR>
</table>
 </form>


</body>
</html>
